<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>统计图表</span>
      </div>
      <el-row>
        <el-col :span="12"
          ><div id="left" style="width: 600px; height: 400px"></div
        ></el-col>
        <el-col :span="12"
          ><div id="right" style="width: 600px; height: 400px"></div
        ></el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  data() {
    return {
      shops: [],
      fav: [],
      forEachList: [],
    };
  },
  mounted() {
    this.getleftdata();
    this.getrightdata();
  },
  methods: {
    getleftdata() {
      this.$axios
        .get("/shops")
        .then((res) => {
          if (res.status == 200) {
            res.data.forEach((item) => {
              this.shops.push(item.title);
              this.fav.push(item.fav);
            });
            var myChart = this.$echarts.init(document.getElementById("left"));
            // 绘制图表
            myChart.setOption({
              title: {
                text: "收藏人数",
              },
              tooltip: {},
              xAxis: {
                data: this.shops.slice(0, 5),
              },
              yAxis: {},
              series: [
                {
                  name: "收藏",
                  type: "bar",
                  data: this.fav,
                  color: "#26a0da",
                },
              ],
            });
          } else {
            console.log("获取课程列表数据失败!");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getrightdata() {
      this.$axios
        .get("/shops")
        .then((res) => {
          if (res.status == 200) {
            res.data.forEach((item) => {
              this.forEachList.push({
                value: item.sale,
                name: item.title,
              });
            });
            var myChart = this.$echarts.init(document.getElementById("right"));
            // 绘制图表
            let option = {
              title: {
                text: "商品购买人数",
                left: "center",
              },
              tooltip: {
                trigger: "item",
              },
              legend: {
                orient: "vertical",
                left: "left",
              },
              series: [
                {
                  name: "收藏人数",
                  type: "pie",
                  radius: "50%",
                  data: this.forEachList.slice(0, 5),
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                  },
                },
              ],
            };
            myChart.setOption(option);
          } else {
            console.log("获取课程列表数据失败!");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>